<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div>
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          <div class="left">
            <Select v-model="typeSelectid" :transfer="true" @on-change="onChangeTypeSelect">
              <Option v-for="item in typeSelect" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>

          <Button type="primary" class="Button" @click="leaveShow()">请假申请</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"
                 @on-selection-change="selectionChange"></Table>
        </Row>
        <div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>
      </Card>
      <!--详情-->
      <Modal v-model="showCurrentTableData" :width="600" :mask-closable="false" :closable="false"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">详情</h3>
        <Form label-position="top">
          <FormItem label="申请人" v-if="dataDetail.user_name">
            <div class="dataDetail-div" v-text="dataDetail.user_name"></div>
          </FormItem>
          <FormItem label="请假事由" v-if="dataDetail.reason">
            <div class="dataDetail-div" v-text="dataDetail.reason"></div>
          </FormItem>
          <FormItem label="请假类型" v-if="dataDetail.type">
            <div class="dataDetail-div" v-text="dataDetail.type ? dataDetail.type.name : ''"></div>
          </FormItem>
          <FormItem label="开始时间" v-if="dataDetail.start_time">
            <div class="dataDetail-div" v-text="dataDetail.start_time"></div>
          </FormItem>
          <FormItem label="结束时间" v-if="dataDetail.end_time">
            <div class="dataDetail-div" v-html="dataDetail.end_time"></div>
          </FormItem>
          <FormItem label="审批人" v-if="dataDetail.approversName">
            <div class="dataDetail-div" v-text="dataDetail.approversName"></div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="hideDetailModal">取消</Button>
        </div>
      </Modal>
      <!--请假-->
      <Modal v-model="leaveDataModal" :width="600" :mask-closable="false" :closable="false"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">请假申请</h3>
        <Form label-position="top">
          <FormItem label="请假事由">
            <Input v-model="leaveData.reason" placeholder="请假事由"></Input>
          </FormItem>
          <FormItem label="请假类型">
            <Select v-model="leaveData.tid" :transfer="true" style="width:100%;">
              <Option v-for="item in leaveTypeArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="请假时间">
            <DatePicker type="datetimerange"
                        format="yyyy-MM-dd HH:mm:ss"
                        :confirm="true"
                        :transfer="true"
                        :editable="false"
                        placement="bottom-start"
                        placeholder="请选择请假时间"
                        v-model="leaveData.DatePickerValue"
                        style="width: 100%;"></DatePicker>
          </FormItem>
          <FormItem label="审批人">
            <Select v-model="leaveData.approvers" :transfer="true" style="width:100%;">
              <Option v-for="item in approversArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="知会人">
            <div class="dataDetail-div">
              <Tree ref="leave_tree" :data="TreeData" show-checkbox multiple></Tree>
            </div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="hideAddModal">取消</Button>
          <Button type="primary" :loading="saveLoading" @click="leaveSave()">确定</Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import commentsList from '../components/comments-list.vue';
  export default {
    components: {
      commentsList
    },
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        id: '',
        approval_type_id: '',
        approval_stage: '',
        approval_status: '',
        typeSelectid: 'all',
        typeSelect: [
          {
            id: 'all',
            name: '全部',
          },
        ],
        search_title: '',// 搜索 标题
        show_comments_list: false,// 评论
        show_users: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'user_name',
            title: '申请人',
          },
          {
            key: 'type',
            title: '请假类型',
            render: (h, params) => {
              var name = params.row.type.name;
              return h('div', [
                h('span', name)
              ]);
            }
          },
          {
            key: 'start_time',
            title: '开始时间',
          },
          {
            key: 'end_time',
            title: '结束时间',
          },
        ],
        data: [],
        dataDetail: {},
        approvalHistory: [],
        initTable: [],
        saveLoading: false,
        rejectedLoading: false,
        passLoading: false,
        ajaxType: 'add',
        leaveDataModal: false,
        leaveData: {
          reason: '',
          tid: '',
          DatePickerValue: [],
          approvers: '',
        },
        selectionArr: [],
        approversArr: [],
        leaveTypeArr: [],
        TreeData: [],
        checked_dep_arr: [],
        checked_users_arr: [],
      };
    },
    created: function () {
      var _this = this;
      _this.getleaveTypeArr('init');
      _this.getData();
    },
    mounted () {
    },
    methods: {
      onChangeTypeSelect: function (val) {
        var _this = this;
        _this.typeSelectid = val;
        _this.page = 1;
        _this.getData();
      },
      // 搜索
      searchFun: function () {
        var _this = this;
      },
      getData () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          tid: _this.typeSelectid == 'all' ? '' : _this.typeSelectid,
          page: _this.page,
          size: _this.size,
        };
        var params = {
          //domain: 'http://sd.jnaw.top/sd2-mock',
          url: '/approval/vacation/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            _this.data = _data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      changePage (page) {
        var _this = this;
        _this.page = page;
        _this.getData();
      },
      onRowData: function (data, index) {
        var _this = this;
        _this.show(index, data);
      },
      show: function (index, data) {
        var _this = this;
        var id = data.id;
        _this.id = id;

        var data = {
          id: _this.id,
        };
        var params = {
          //domain: 'http://sd.jnaw.top/sd2-mock',
          url: '/approval/vacation/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            var approversNameArr = [];
            var approvers = _data.approvers || [];
            for (var k in approvers) {
              if (!approvers[k]) {
                continue;
              }
              var name = approvers[k].name;
              approversNameArr.push(name);
            }
            _data.approversName = approversNameArr.join(' ， ');
            _this.dataDetail = _data;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      hideDetailModal: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 隐藏编辑页面
      hideAddModal: function () {
        var _this = this;
        _this.leaveDataModal = false;
      },
      // 获取审批人
      getApproversArr: function () {
        var _this = this;
        var data = {};
        var params = {
          url: '/approval/leader',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.approversArr = _data.approvers;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 获取请假类型
      getleaveTypeArr: function (init) {
        var _this = this;
        var data = {};
        var params = {
          url: '/approval/vacation/type',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.leaveTypeArr = _data;
            if (init && init == 'init') {// 初始化列表筛选下拉框
              _this.initTypeSelectArr();
            }
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 初始化列表筛选下拉框
      initTypeSelectArr: function () {
        var _this = this;
        var leaveTypeArr = _this.leaveTypeArr;
        var typeSelect = [
          {
            id: 'all',
            name: '全部',
          }
        ];
        for (var k in leaveTypeArr) {
          if (!leaveTypeArr[k]) {
            continue;
          }
          var id = leaveTypeArr[k].id;
          var name = leaveTypeArr[k].name;
          var obj = {
            id: id,
            name: name,
          };
          typeSelect.push(obj);
        }
        _this.typeSelect = typeSelect;
      },
      // 获取选人 树信息
      getTreeData: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          id: 1
        };
        var params = {
          url: '/department/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || [];
            var TreeData = [];
            TreeData.push(data);
            _this.toDataFun(TreeData);
            _this.TreeData = TreeData;
          } else {
            _this.$Message.error('查询人员信息失败!');
          }
        }
      },
      // 处理树信息
      toDataFun: function (arr) {
        var _this = this;
        arr.forEach(function (e) {
          e.title = e.name;
          e.expand = true;//展开
          if (e.type) {
            e.type = 'dep';
            var checked_dep_arr = _this.checked_dep_arr;
            if (Utils.idInArray(e.id, checked_dep_arr)) {
              e.checked = true;// 选中
            }
          } else {
            e.type = 'user';
            var checked_users_arr = _this.checked_users_arr;
            if (Utils.idInArray(e.id, checked_users_arr)) {
              e.checked = true;// 选中
            }
          }
          var staff = e.staff || [];
          var children = e.children || [];
          if (children.length == 0) {
            e.children = [];
          }
          e.children.push(...staff);
          _this.toDataFun(e.children);
        });
      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
      // 显示请假
      leaveShow: function () {
        var _this = this;
        _this.leaveData.reason = '';
        _this.leaveData.tid = '';
        _this.leaveData.DatePickerValue = [];
        _this.leaveData.approvers = '';
        _this.TreeData = [];
        _this.getApproversArr();
        _this.getleaveTypeArr();
        _this.getTreeData();
        _this.leaveDataModal = true;
      },
      // 保存请假
      leaveSave: function () {
        var _this = this;
        var reason = _this.leaveData.reason;
        var tid = _this.leaveData.tid;
        var DatePickerValue = _this.leaveData.DatePickerValue;
        var approvers = _this.leaveData.approvers;
        var CheckedNodes = _this.$refs.leave_tree.getCheckedNodes();

        if (reason == '') {
          _this.$Message.error('请填写请假事由!');
          return false;
        }
        if (tid == '') {
          _this.$Message.error('请选择请假事由!');
          return false;
        }
        if (DatePickerValue.length == 0) {
          _this.$Message.error('请选择请假时间!');
          return false;
        }
        if (approvers == '') {
          _this.$Message.error('请选择审批人!');
          return false;
        }
        var startDateVal = DatePickerValue[0];
        var endDateVal = DatePickerValue[1];
        var startDate = Utils.timestampToFormatDatetime(startDateVal);
        var endDate = Utils.timestampToFormatDatetime(endDateVal);
        var departments = [];
        var users = [];
        for (var k in CheckedNodes) {
          if (!CheckedNodes[k]) {
            continue;
          }
          var id = CheckedNodes[k].id;
          var type = CheckedNodes[k].type;
          if (type == 'dep') {
            departments.push(id);
          } else if (type == 'user') {
            users.push(id);
          }
        }
        var data = {
          reason: reason,
          tid: tid,
          start_time: startDate,
          end_time: endDate,
          approvers: [approvers],
          inform: {
            users: users,
            departments: departments
          }
        };
        var params = {
          url: '/approval/vacation/add',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.saveLoading = true;
        function _successFun(res) {
          _this.saveLoading = false;
          if (res.result == 0) {
            _this.page = 1;
            _this.getData();
            _this.leaveData.reason = '';
            _this.leaveData.tid = '';
            _this.leaveData.DatePickerValue = [];
            _this.leaveData.approvers = '';

            _this.hideAddModal();
          } else {
            _this.$Message.error('保存信息失败!');
          }
        }
      },

    }
  };
</script>
